<template>
  <div class="hello">
    <!-- <h1>{{ countLen }}</h1>
    <h1>{{ countLen }}</h1> -->
    <h1>{{ myWatch }}</h1>
    <button @click="clickHandler">修改</button>
  </div>
</template>

<script setup>
import {reactive,watch} from 'vue'

// const myData=shallowReactive({
//   "name":"robin",
//   "age":18,
//   "friends":["张三","李四"]
// })

// const count=ref(0)
const myData=reactive({
  "name":"robin",
  "age":18,
  "friends":["张三","李四"]
})
// const count=ref(0)
function clickHandler(){
  // myData.friends.push("王五")
  // myData.age++
  // count.value++
}

// const countLen=computed(()=>{
//   // console.log(myData.friends.length)
//   return myData.friends.length
// })

//watch
// const count=ref(0)
const myWatch=watch(()=>{
  myData.age
},(newValue,oldValue)=>{
  console.log(newValue,oldValue)

})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
